<template>
	<view>

		<view class="assigned" v-if="isAssigned" @click="onAssigned">指派当前任务给他人</view>
		<view class="content">
			<!--
		                	作者：1169774483@qq.com
		                	时间：2018-06-07
		                	描述： 上半部
		                -->
			<view class="item-wapper">
				<view class="desc bottom-underline">
					<text class="title" v-if="detailsData.routName">{{detailsData.routName}}</text> {{detailsData.rouDetails}}
				</view>

				<view class="img-wapper margin-top15 " v-if="detailsData.imgList">
					<view class="item-item" v-for="(item,index) in detailsData.imgList" :key="index" @click="ReviewImages(detailsData.imgList,index)">
						<image :src="item.filePath" mode="aspectFill" />
					</view>
				</view>

				<view class="record-wapper" v-if="detailsData.reptVoiceList">
					<view class="record-item" v-for="(item,index) in detailsData.reptVoiceList" :key="index" @click="playVoice(item.filePath)">
						<text class="iconfont icon-kaishishijian"></text>
						<text>语音</text>
					</view>
				</view>
			</view>
			<!--
		                	作者：1169774483@qq.com
		                	时间：2018-06-07
		                	描述：中部
		                -->

			<view class="orderUser margin-top15">
				<view class="item" v-if="detailsData.address">
					<view class="item-title">
						<text class="title">住址</text>
						<text class="desc">{{detailsData.address}}</text>
					</view>
				</view>
				<view class="item" v-if="detailsData.contactPerson">
					<view class="item-title">
						<text class="title">联系人</text>
						<text class="desc">{{detailsData.contactPerson}}</text>
					</view>
				</view>
				<view class="item" @click="goiponeClick(detailsData.contactPhone)" v-if="detailsData.contactPhone">
					<view class="item-title">
						<text class="title">联系电话</text>
						<view class="ipone">{{detailsData.contactPhone}} <text class="mui-icon mui-icon-phone"></text></view>
					</view>
				</view>
			</view>

			<view class="orderUser margin-top15" v-if="detailsData.LeaderPhone">
				<view class="item">
					<view class="item-title">
						<text class="title">物资名称</text>
						<text class="desc">{{detailsData.matName}}</text>
					</view>
				</view>
			</view>
			<view class="orderUser" v-if="detailsData.LeaderPhone">
				<view class="item">
					<view class="item-title">
						<text class="title">负责人名称</text>
						<text class="desc">{{detailsData.LeaderName}}</text>
					</view>
				</view>
			</view>
			<view class="orderUser" v-if="detailsData.LeaderPhone">
				<view class="item" @click="goiponeClick(detailsData.LeaderPhone)">
					<view class="item-title">
						<text class="title">负责人电话</text>
						<view class="ipone">{{detailsData.LeaderPhone }} <text class="mui-icon mui-icon-phone"></text></view>
					</view>
				</view>
			</view>

			<!--
		                	作者：1169774483@qq.com
		                	时间：2018-06-07
		                	描述：下部分
		                -->
			<view class="schedule margin-top15">
				<view v-if="isStart" class="fanhui" @click="fanhuiClick">
					返回
				</view>
				<view v-else  class="button-wapper">
					<view class="done" @click="fanhuiClick">返回</view>
					<view class="over" @click="wanchengClick">完成</view>
				</view>
			</view>
			
			<view class="line"></view>
			<view class="lowPath">
				<view class="flowPath-wapper margin-top15" v-if="detailsData.repairsLogList">
					<view class="schedule-shuxian"></view>
					<view :class="index==0?'list-item left-icon-red':'list-item left-icon-hui'" v-for="(item,index) in detailsData.repairsLogList"
					:key="index">
						<view class="item-time">{{item.replCD}}</view>
						<view class="item-title bottom-underline">{{item.replDetails}}</view>
					</view>
				</view>
			</view>
			
			<view class="line" v-if="detailsData.routRemarks"></view>
			<view class="guideline margin-top15" v-if="detailsData.routRemarks">
				<view class="guideline-title">工作指引</view>
				<view class="guideline-text">
					{{detailsData.routRemarks}}
				</view>
			</view>
		</view>
		<record-popup v-if="isStatePup" :text="isStateText"></record-popup>
	</view>
</template>

<script>
	import recordPopup from '../../../components/report-matter/recordPopup.vue' 
	import util from '../../../utils/util.js'
	import { 
		workModule
	} from "../../../modules/workOrder.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	const Work = new workModule()
	const innerAudioContext = uni.createInnerAudioContext()
	innerAudioContext.autoplay = true;
	
	export default {
		components:{
			recordPopup
		},
		data() {
			return {
				isStateText: '播放中',
				isStatePup: false,
				isStart: false,
				isAssigned: false,
				detailsData: {}
			};
		},
		computed: mapState(['update']),
		
		onLoad(e) {
			const data = JSON.parse(e.data)
			console.log(data)
			const userData =  util.getStorage('userData') // 获取用户数据
			this.getDetails(data) // 获取页面数据
			if(userData.stand == 3 && data.state == 1) {
				this.isAssigned = true
			}
			this.watchVoice() // 监听语音播放完成事件
		},
		
		methods: {
			...mapMutations(['isUpdate']), // 调用vuex 里的方法
			getDetails(data) {
				let { rouID, rouType, gtaID , state} = data // 对象解构赋值
				this.isStart = state == 1? false : true
				Work.getDetailsData(rouID, rouType, gtaID)
					.then((res) => {
						res.gtaID = gtaID
						console.log('页面数据详情:', res)
						this.detailsData = res
					})
			},
			
			onAssigned() {
				let { rouID, rouType, gtaID } = this.detailsData
				uni.navigateTo({
					url: `/pages/workOrder/assigned/assigned?rouID=${rouID}&rouType=${rouType}&gtaID=${gtaID}`
				})
			},
			
			ReviewImages(lists,index) { // 查看图片
				
				 
				plus.nativeUI.previewImage(this._filterListImg(lists), {
					current: index
				})
			},
			
			playVoice(path) { // 播放录音
				if (path) { 
					innerAudioContext.src = path
					innerAudioContext.play()
					this.isStatePup = true
				}
			},
			
			goiponeClick(phone) { // 拨打电话
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			
			fanhuiClick() { // 返回上页
				uni.navigateBack()
			},
			
			wanchengClick() { // 完成任务
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定任务已完成？',
					success() {
						that.completeTask() // 执行完成任务的方法
					}
				})
			},
			
			completeTask() { // 提交完成任务 方法
				let {rouID,rouType,gtaID} = this.detailsData
				Work.completeTask(rouID,rouType,gtaID)
					.then((res)=>{
						this.isUpdate() // 将 vuex 里的值 update改为true  , 只有updata值为true时才更新页面 
						uni.showToast({
							icon: 'success',
							title: '提交成功'
						})
						setTimeout(()=>{
							this.fanhuiClick()
						},1000)
					})
			},
			
			_filterListImg(imgList) { // 过滤数组方法 
				let list = []
				for(let i = 0; i < imgList.length; i++) {
					list.push(imgList[i].filePath)
				}
				return list
			},
			
			watchVoice() {
				innerAudioContext.onEnded((res) => { // 监听语音播放完成事件
					this.isStatePup = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/common.scss";
	@import "../../../common/scss/iconfont.css";
	@import "details.scss";
</style>
